<template>
  <el-row>
    <el-col :span="24">
      <el-row style="margin-bottom: 20px; text-align: right">
        <el-button type="primary" @click="addProject">新增项目</el-button>
        <el-button type="primary" @click="addProject2">打印</el-button>
      </el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="ApplicationName"
          align="center"
          label="项目名称">
        </el-table-column>
        <el-table-column
          prop="CreateTime"
          align="center"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="Username"
          align="center"
          label="管理账号">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="pageChange"
        @prev-click="pageChange"
        @next-click="pageChange"
        :total="projectListPage.totalRow">
      </el-pagination>
    </el-col>
    <addProjectDialog v-if="addProjectDialog" :dialogData="dialogData" :addProjectDialog="addProjectDialog" :isEdit="isEdit" @getDialogStatus="addDialogStatus"></addProjectDialog>
  </el-row>
</template>

<script>
  export default {
    name: "addProject",
    components: {
      addProjectDialog: resolve => {
        require(["../../components/project/addProject.vue"],resolve)
      }
    },
    data() {
      return {
        tableData: [],
        projectListPage: {
          pageSize: 10,
          page: 1,
          totalRow: null
        },
        addProjectDialog: false,
        dialogData: {},
        isEdit: false
      }
    },
    created() {
     // this.getProjectList(this.projectListPage);
    },
    methods: {
      //获取项目列表
      getProjectList(projectListPage) {
        this.$get(`/v1/manage/project`, projectListPage).then(res => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.list;
            this.projectListPage.totalRow = res.data.data.totalRow;
          }
        })
      },
      //分页事件
      pageChange(size) {
        this.projectListPage.page = size;
        this.getProjectList(this.projectListPage);
      },
      //新增事件
      addProject() {
        this.addProjectDialog = true;
        this.isEdit = false;
      },
      addProject2() {
        window.print()
      },
      //查看事件
      handleEdit(index, row) {
        this.$get(`/v1/manage/project/${row.CompanyId}`).then(res => {
          if (res.data.code === 200) {
            this.dialogData = res.data.data;
            this.isEdit = true;
            this.addProjectDialog = true;
          } else {
            this.$message.error("查看失败，请稍后再试!");
          }
        });
      },
      //模态框关闭事件
      addDialogStatus(flag) {
        this.addProjectDialog = false;
        if (flag) {
          this.getProjectList(this.projectListPage);
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-pagination {
    margin-top: 10px;
    text-align: right;
  }
</style>
